<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
// 路由
const router = useRouter()

// 获取当前时间
const currentTime = ref('')

// 更新时间的函数
const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
}

// 按钮状态
const buttonStates = ref({
  modelTraining: 'normal',
  inferenceDemo: 'normal',
  home: '正常',
  user: '正常',
  nextStep: 'normal',
  prevStep: 'normal',
  startTrain: 'normal'
})

// 鼠标事件处理
const handleMouseEnter = (button) => {
  buttonStates.value[button] = '悬浮'
}

const handleMouseLeave = (button) => {
  buttonStates.value[button] = '正常'
}

const handleMouseDown = (button) => {
  buttonStates.value[button] = '点击'
}

const handleMouseUp = (button) => {
  buttonStates.value[button] = '悬浮'
}

// 当前步骤
const currentStep = ref(1) // 1: 算法设置, 2: 数据集选择

// 数据集列表
const datasetList = ref([])

// 选中的数据集
const selectedDataset = ref('')

// 算法列表
const algorithmList = ref([])

// 选中的算法
const selectedAlgorithm = ref('')

// 算法适用场景
const algorithmScene = ref('')

// 参数方案列表
const paramSchemeList = ref([])

// 选中的参数方案
const selectedParamScheme = ref('')

// 筛选类型列表
const filterTypeList = ref([
  { id: 1, name: '筛选类型1' },
  { id: 2, name: '筛选类型2' },
  { id: 3, name: '筛选类型3' },
  { id: 4, name: '筛选类型4' },
  { id: 5, name: '筛选类型5' },
  { id: 6, name: '筛选类型6' }
])

// 选中的筛选类型
const selectedFilterTypes = ref([])

// 权重列表
const weightList = ref([])

// 权重创建用户
const weightCreator = ref('')

// 时间排序方式
const timeSort = ref('时间倒序')

// 获取算法列表
const getAlgorithmList = async () => {
  try {
    // 模拟API请求
    // 实际项目中应该使用axios等工具发送请求
    // const response = await axios.post('/api', {
    //   operation: 'get_algorithmlist'
    // })
    
    // 模拟数据
    algorithmList.value = [
      { id: 1, name: '算法A', describe: '算法A的描述' },
      { id: 2, name: '算法B', describe: '算法B的描述' },
      { id: 3, name: '算法C', describe: '算法C的描述' }
    ]
  } catch (error) {
    console.error('获取算法列表失败:', error)
  }
}

// 获取参数方案列表
const getParamSchemeList = async (algorithmId) => {
  try {
    // 模拟API请求
    // 实际项目中应该使用axios等工具发送请求
    // const response = await axios.post('/api', {
    //   operation: 'get_recommendparamlist',
    //   params: {
    //     algorithmID: algorithmId
    //   }
    // })
    
    // 模拟数据
    paramSchemeList.value = [
      { id: 1, name: '参数方案A', describe: '参数方案A的描述' },
      { id: 2, name: '参数方案B', describe: '参数方案B的描述' },
      { id: 3, name: '参数方案C', describe: '参数方案C的描述' },
      { id: 4, name: '参数方案D', describe: '参数方案D的描述' }
    ]
  } catch (error) {
    console.error('获取参数方案列表失败:', error)
  }
}

// 获取权重列表
const getWeightList = async (algorithmId) => {
  try {
    // 模拟API请求
    // 实际项目中应该使用axios等工具发送请求
    // const response = await axios.post('/api', {
    //   operation: 'get_algo_weightlist',
    //   params: {
    //     algorithmID: algorithmId
    //   }
    // })
    
    // 模拟数据
    weightList.value = [
      { id: 1, name: '权重A', date: '2023/02/06', score: 0.95, creator: '用户X' },
      { id: 2, name: '权重B', date: '2023/02/06', score: 0.92, creator: '用户Y' },
      { id: 3, name: '权重C', date: '2023/02/06', score: 0.88, creator: '用户X' }
    ]
  } catch (error) {
    console.error('获取权重列表失败:', error)
  }
}

// 查看参数方案详情
const viewParamSchemeDetail = async (paramId) => {
  try {
    // 模拟API请求
    // 实际项目中应该使用axios等工具发送请求
    // const response = await axios.post('/api', {
    //   operation: 'get_recommendparam_detail',
    //   params: {
    //     paramID: paramId
    //   }
    // })
    
    // 模拟数据
    const detail = {
      name: '参数方案详情',
      params: {
        param1: '值1',
        param2: '值2',
        param3: '值3'
      }
    }
    
    // 显示详情弹窗
    alert(JSON.stringify(detail, null, 2))
  } catch (error) {
    console.error('获取参数方案详情失败:', error)
  }
}

// 获取数据集列表
const getDatasetList = async (algorithmId) => {
  try {
    // 模拟API请求
    // 实际项目中应该使用axios等工具发送请求
    // const response = await axios.post('/api', {
    //   operation: 'get_datasetlist',
    //   params: {
    //     algorithmID: algorithmId
    //   }
    // })
    
    // 模拟数据
    return [
      { id: 1, name: '数据集A' },
      { id: 2, name: '数据集B' },
      { id: 3, name: '数据集C' }
    ]
  } catch (error) {
    console.error('获取数据集列表失败:', error)
    return []
  }
}

// 处理算法选择
const handleAlgorithmChange = async () => {
  if (selectedAlgorithm.value) {
    const algorithmId = algorithmList.value.find(item => item.name === selectedAlgorithm.value)?.id
    if (algorithmId) {
      await getParamSchemeList(algorithmId)
      await getWeightList(algorithmId)
    }
  }
}

// 处理下一步按钮点击
const handleNextStep = async () => {
  if (currentStep.value === 1) {
    // 从算法设置步骤到数据集选择步骤
    if (selectedAlgorithm.value) {
      const algorithmId = algorithmList.value.find(item => item.name === selectedAlgorithm.value)?.id
      if (algorithmId) {
        const datasets = await getDatasetList(algorithmId)
        datasetList.value = datasets
        currentStep.value = 2
      } else {
        alert('请选择算法')
      }
    } else {
      alert('请选择算法')
    }
  }
}
// 返回主页
const goToHome = () => {
  router.push('/')
}
// 处理开始训练按钮点击
const handleStartTrain = async () => {
  if (!selectedDataset.value) {
    alert('请选择数据集')
    return
  }

//   const algorithmId = algorithmList.value.find(item => item.name === selectedAlgorithm.value)?.id
//   const paramId = selectedParamScheme.value
//   const weightId = weightList.value.find(item => item.id === selectedWeight)?.id

  try {
    // 模拟API请求
    // const response = await axios.post('/api', {
    //   operation: 'start_train',
    //   params: {
    //     algorithmID: algorithmId,
    //     useRecommendParam: true,
    //     recommendParamID: paramId,
    //     paramContent: {},
    //     weightID: weightId,
    //     datasetID: selectedDataset.value
    //   }
    // })

    // 模拟响应数据
    const response = {
      operation: 'start_train',
      params: {
        state: 1
      }
    }

    if (response.params.state === 1) {
      // 跳转到训练界面
    //   alert("1")
      router.push('/training')
    //   alert("2")
    } else {
      alert('开始训练失败')
    }
  } catch (error) {
    console.error('开始训练失败:', error)
    alert('开始训练失败')
  }
}

// 过滤权重列表
const filteredWeightList = computed(() => {
  let result = [...weightList.value]
  
  // 按创建用户筛选
  if (weightCreator.value) {
    result = result.filter(item => item.creator === weightCreator.value)
  }
  
  // 按时间排序
  if (timeSort.value === '时间正序') {
    result.sort((a, b) => new Date(a.date) - new Date(b.date))
  } else {
    result.sort((a, b) => new Date(b.date) - new Date(a.date))
  }
  
  return result
})

// 页面加载时获取算法列表
onMounted(() => {
  updateTime()
  // 每秒更新一次时间
  setInterval(updateTime, 1000)
  
  // 获取算法列表
  getAlgorithmList()
})
</script>

<template>
  <div class="model-training-container">
    
    
    
    <!-- 主内容区域 -->
    <div class="main-content">
            <!-- 顶部栏 -->
      <div class="top-bar">
        <div class="system-name">算筹平台系统</div>
        <div class="home-button"
             @mouseenter="handleMouseEnter('home')"
             @mouseleave="handleMouseLeave('home')"
             @mousedown="handleMouseDown('home')"
             @mouseup="handleMouseUp('home')"
             @click="goToHome">
          <img :src="`/pic/dataManagement/首页-${buttonStates.home}.png`" alt="首页">
        </div>
        <div class="current-time">{{ currentTime }}</div>
        <div class="user-info">
          <div class="user-button"
               @mouseenter="handleMouseEnter('user')"
               @mouseleave="handleMouseLeave('user')"
               @mousedown="handleMouseDown('user')"
               @mouseup="handleMouseUp('user')">
            <img :src="`/pic/dataManagement/用户-${buttonStates.user}.png`" alt="用户">
          </div>
          <span class="username">用户：XXXX</span>
        </div>
      </div>
      
      <!-- 内容区域 -->
      <div class="content-area">
        <div class="training-main">
          <!-- 标题区域 -->
          <div class="title-area">
            <div class="title">
              <img src="/pic/trainingManagement/模型训练-正常.png" alt="模型训练">
              <span>训练任务创建</span>
            </div>
            
            <!-- 任务导入按钮 -->
            <div class="task-import-button"
                @mouseenter="handleMouseEnter('taskImport')"
                @mouseleave="handleMouseLeave('taskImport')"
                @mousedown="handleMouseDown('taskImport')"
                @mouseup="handleMouseUp('taskImport')">
              <img :src="
                buttonStates.taskImport === 'normal' ? '/pic/trainingManagement/任务导入-正常.png' : 
                buttonStates.taskImport === 'hover' ? '/pic/trainingManagement/任务导入-悬浮.png' : 
                '/pic/trainingManagement/任务导入-点击.png'" alt="任务导入">
            </div>
          </div>
          <!-- 虚线分隔线 -->
          <div class="divider-line">
            <img src="/pic/trainingManagement/虚线横向.png" alt="分隔线">
          </div>
        </div>
        <div class="steps-container">
          <!-- 步骤区域 -->
          <div class="steps-area">
            <div class="step">
              <div class="step-icon">
                <img src="/pic/trainingManagement/1-正常.png" alt="步骤1">
              </div>
              <span>算法设置</span>
              <div class="step-arrow" v-if="currentStep === 1">
                <img src="/pic/trainingManagement/步骤-箭头.png" alt="箭头">
              </div>
              <div class="step-check" v-if="currentStep === 2">
                <img src="/pic/trainingManagement/步骤-对号.png" alt="对号">
              </div>
            </div>
            
            <div class="step">
              <div class="step-icon">
                <img :src="currentStep === 1 ? '/pic/trainingManagement/2-未激活.png' : '/pic/trainingManagement/2-正常.png'" alt="步骤2">
              </div>
              <span>数据集选择</span>
              <div class="step-arrow" v-if="currentStep === 2">
                <img src="/pic/trainingManagement/步骤-箭头.png" alt="箭头">
              </div>
            </div>
          </div>
        
          <!-- 算法设置步骤 -->
          <div class="algorithm-setup" v-if="currentStep === 1">
            <!-- 算法选择区域 -->
            <div class="algorithm-selection-area">
              <!-- 算法名称 -->
              <div class="algorithm-name">
                <span>算法名称：</span>
                <select v-model="selectedAlgorithm" @change="handleAlgorithmChange">
                  <option value="" disabled>选择算法</option>
                  <option v-for="algo in algorithmList" :key="algo.id" :value="algo.name">{{ algo.name }}</option>
                </select>
              </div>
              
              <!-- 算法适用场景 -->
              <div class="algorithm-scene">
                <span>算法适用场景：</span>
                <input type="text" v-model="algorithmScene" placeholder="请输入算法适用场景">
              </div>
            </div>
            
            <!-- 参数方案选择 -->
            <div class="param-scheme-selection">
              <div class="section-title">方案选择：</div>
              <div class="param-scheme-list">
                <div class="param-scheme-item" v-for="scheme in paramSchemeList" :key="scheme.id">
                  <div class="param-scheme-header">
                    <input type="radio" :id="`scheme-${scheme.id}`" name="paramScheme" :value="scheme.id" v-model="selectedParamScheme">
                    <label :for="`scheme-${scheme.id}`">参数方案{{ scheme.name.slice(-1) }}</label>
                  </div>
                  <div class="param-scheme-desc">{{ scheme.describe }}</div>
                  <div class="param-scheme-detail" @click="viewParamSchemeDetail(scheme.id)">查看详情</div>
                </div>
              </div>
            </div>
            
            <!-- 筛选类型 -->
            <div class="filter-type-selection">
              <div class="section-title">筛选类型：</div>
              <div class="filter-type-list">
                <div class="filter-type-item" v-for="type in filterTypeList" :key="type.id">
                  <input type="checkbox" :id="`type-${type.id}`" :value="type.id" v-model="selectedFilterTypes">
                  <label :for="`type-${type.id}`">筛选类型{{ type.id }}</label>
                </div>
              </div>
            </div>
            
            <!-- 权重选择 -->
            <div class="weight-selection">
              <!-- 权重筛选区域 -->
              <div class="weight-filter-area">
                <!-- 权重创建用户 -->
                <div class="weight-creator">
                  <span>权重创建用户：</span>
                  <select v-model="weightCreator">
                    <option value="">全部用户</option>
                    <option value="用户X">用户X</option>
                    <option value="用户Y">用户Y</option>
                  </select>
                </div>
                
                <!-- 时间排序 -->
                <div class="time-sort">
                  <span>时间排序方式：</span>
                  <select v-model="timeSort">
                    <option value="时间正序">时间正序</option>
                    <option value="时间倒序">时间倒序</option>
                  </select>
                </div>
              </div>
              
              <!-- 权重列表 -->
              <div class="weight-list">
                <div class="weight-item" v-for="weight in filteredWeightList" :key="weight.id">
                  <div class="weight-header">
                    <input type="radio" :id="`weight-${weight.id}`" name="weight" :value="weight.id">
                    <label :for="`weight-${weight.id}`">权重{{ weight.name.slice(-1) }}</label>
                  </div>
                  <div class="weight-info">
                    <div>权重创建用户：{{ weight.creator }}</div>
                    <div>创建创建日期：{{ weight.date }}</div>
                    <div>得分：{{ weight.score }}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 下一步按钮 -->
          <div class="next-step-button"
              @mouseenter="handleMouseEnter('nextStep')"
              @mouseleave="handleMouseLeave('nextStep')"
              @mousedown="handleMouseDown('nextStep')"
              @mouseup="handleMouseUp('nextStep')"
              @click="handleNextStep">
            下一步
          </div>
          </div>
        
          <!-- 数据集选择步骤 -->
          <div class="dataset-selection" v-if="currentStep === 2">
            <!-- 数据集选择内容 -->
            <div class="dataset-content">
              <div class="dataset-list">
                <div class="dataset-item" v-for="dataset in datasetList" :key="dataset.id">
                  <input type="radio" :id="`dataset-${dataset.id}`" name="dataset" :value="dataset.id" v-model="selectedDataset">
                  <label :for="`dataset-${dataset.id}`">{{ dataset.name }}</label>
                </div>
              </div>
            </div>
            
            <!-- 按钮区域 -->
            <div class="button-area">
              <!-- 上一步按钮 -->
              <div class="prev-step-button"
                  @mouseenter="handleMouseEnter('prevStep')"
                  @mouseleave="handleMouseLeave('prevStep')"
                  @mousedown="handleMouseDown('prevStep')"
                  @mouseup="handleMouseUp('prevStep')"
                  @click="currentStep = 1"
                  >
                  上一步
                  </div>
              
              <!-- 开始训练按钮 -->
              <div class="start-train-button"
                  @mouseenter="handleMouseEnter('startTrain')"
                  @mouseleave="handleMouseLeave('startTrain')"
                  @mousedown="handleMouseDown('startTrain')"
                  @mouseup="handleMouseUp('startTrain')"
                  @click="handleStartTrain">
                开始训练
              </div>
              
            </div>
          </div>
        </div>  
      </div>
    </div>
  </div>
</template>

<style scoped>
.model-training-container {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #f0f2f5;
}

.sidebar {
  width: 80px;
  background-color: #4a6baf;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.logo img {
  width: 60px;
  height: auto;
}

.nav-buttons {
  margin-top: 20px;
}

.nav-button {
  margin-bottom: 10px;
  cursor: pointer;
}

.nav-button img {
  width: 60px;
  height: auto;
}
/* .sidebar-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
  color: white;
} */

/* .sidebar-button img {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
} */


/* 主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}



/* 内容区域样式 */
.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  position: relative;
}
.top-bar {
  height: 60px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.system-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.home-button {
  margin-left: 20px;
  cursor: pointer;
}

.current-time {
  margin-left: auto;
  color: #666;
}

.user-info {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.user-button {
  cursor: pointer;
  margin-right: 10px;
}

.username {
  color: #333;
}
/* 标题区域样式 */
.title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  display: flex;
  align-items: center;
}

.title img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.title span {
  font-size: 18px;
  font-weight: bold;
}

.task-import-button {
  cursor: pointer;
}

.task-import-button img {
  height: 40px;
}

/* 步骤区域样式 */
.steps-area {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  padding-left: 20px;
  flex: 1;
}

.step {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.step-icon img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.step-arrow img,
.step-check img {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

/* 算法设置步骤样式 */
.algorithm-setup {
  background-color: white;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

.algorithm-selection-area {
  display: flex;
  margin-bottom: 20px;
}

.algorithm-name,
.algorithm-scene {
  flex: 1;
  margin-right: 20px;
}

.algorithm-name select,
.algorithm-scene input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.param-scheme-list,
.weight-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.param-scheme-item,
.weight-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}

.param-scheme-header,
.weight-header {
  font-weight: bold;
  margin-bottom: 5px;
}

.param-scheme-desc {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.param-scheme-detail {
  color: #4a6baf;
  cursor: pointer;
  text-align: right;
}

.filter-type-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.weight-filter-area {
  display: flex;
  margin-bottom: 15px;
}

.weight-creator,
.time-sort {
  flex: 1;
  margin-right: 20px;
}

.weight-creator select,
.time-sort select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.weight-info {
  font-size: 14px;
  color: #666;
}

/* 数据集选择步骤样式 */
.dataset-selection {
  background-color: white;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  min-height: 400px;
}

.dataset-content {
  margin-bottom: 60px;
}

.dataset-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 20px;
}

.dataset-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.dataset-item input[type="radio"] {
  margin-right: 10px;
}

.button-area {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 20px;
}

/* 下一步按钮样式 */
.next-step-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}

.next-step-button img {
  height: 40px;
}
.next-step-button,
.prev-step-button,
.start-train-button {
  background-color: #4a6baf;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.next-step-button:hover,
.prev-step-button:hover,
.start-train-button:hover {
  background-color: #3a5a9f;
}

.steps-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  background-color: white;
}
/* 推理演示主体区域 */
.training-main {
  background-color: white;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>